<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/jiazai.css" />
		<style type="text/css">
			body {
				background: white;
			}
			
			#top {
				padding: 20px;
				font-size: 18px;
				text-align: center;
			}
			
			#content {
				padding: 0 20px;
			}
			
			#bottom {
				position: fixed;
				bottom: 40px;
				left: 0;
				right: 0;
				font-size: 15px;
				text-align: center;
				letter-spacing: 1px;
				color: #0C61FF;
			}
			
			.logo {
				padding-bottom: 20px;
			}
			
			.logo>img {
				width: 150px;
				height: 150px;
			}
			
			.input,
			.input-pin {
				margin: 20px 0;
				padding: 8px 20px;
				background: #F5F8FF;
				border-radius: 5px;
			}
			
			input::-webkit-input-placeholder {
				font-size: 14px;
				color: #999;
			}
			
			.input>input,
			.input-pin>input {
				flex: 1 1 0;
				padding: 0;
				margin: 0;
				border: none;
				background: transparent;
			}
			
			.input>img {
				margin-left: 20px;
				flex: 0 0 18px;
			}
			
			.notice {
				padding-bottom: 10px;
				font-size: 12px;
				color: #FF2144;
			}

			button {
				width: 100%;
				padding: 15px 0;
				font-size: 15px;
				color: white;
				background: #93A0B9;
				border-radius: 5px;
				border: none;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<!-- 加载中动画 -->
			<div id='jiazai-ani' v-if='jiazai'>
				<div class="arc"></div>
				<h1><span>LOADING</span></h1>
			</div>
			<!-- 加载中动画 -->

			<div id="top">
				创建钱包
			</div>
			<div id="content">
				<div class="dis-cen logo">
					<img src="img/logo1.png" />
				</div>
				<div class='dis-spa input'>
					<input :type="offShow?'text':'password'" placeholder="设置PIN（8-20位数字或字母）" v-model='pin' />
					<img @tap='offShow=!offShow' :src="offShow?'img/eyes-open.svg':'img/eyes-close.svg'" style="width:18px;height: 18px;" />
				</div>
				<div class="input-pin">
					<input :type="offShow?'text':'password'" placeholder="确认PIN" v-model='surePin' />
				</div>
				<div class="input-pin">
					<input placeholder="输入邀请码" type='text' v-model='inviCode' />
				</div>
				<p class='dis-spa notice' >
					<span v-text='notice'>两次密码输入有误</span>
					<span style="font-size: 14px;color: #0C61FF;">查看服务协议</span>
				</p>
				<button @tap='sure' :style="{'background':offColor?'#0c61ff':''}">确认</button>
			</div>
			<div id="bottom" @tap='imp'>
				导入钱包
			</div>
		</div>
		<script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					jiazai: false,
					//false:不显示密码  true:显示密码
					offShow:false,
					//輸入的錯誤提示
					notice:'',
					//邀请码
					inviCode:'',
					pin:'',
					surePin:'',
					//控制按鈕顔色
					offColor:false
				},
				watch:{
					pin:function(){
						this.notice='';
					},
					surePin:function(val){
						this.notice='';
						if(val.length>=8&&val.length<=20&&val==this.pin){
							this.offColor=true;
						}else{
							this.offColor=false;
						}
					}
				},
				methods: {
					sure: function() {
//						if(this.pin.length<8||this.pin.length>20){
//							this.notice='请输入正确的PIN';
//							return;
//						}
//						if(this.pin!=this.surePin){
//							this.notice='两次PIN输入不一致';
//							return;
//						}
						var This = this;
						_openHref({
							url: 'backup-word.html',
							id: 'backupWord'
						});
					},
					//导入钱包
					imp: function() {
						_openHref({
							url: 'import-wallet.html',
							id: 'importWallet'
						});
					},
				}
			});
			mui.init();
			var close = function() {
				mui.plusReady(function() {
					var index = plus.webview.currentWebview();
					var all = plus.webview.all();
					var indexUrl = index.getURL();
					setTimeout(function() {
						for(var i = 0; i < all.length; i++) {
							if(all[i].getURL() != indexUrl) {
								all[i].hide();
							}
						}
					}, 4000);
					setTimeout(function() {
						for(var i = 0; i < all.length; i++) {
							if(all[i].getURL() != indexUrl) {
								all[i].close('none');
							}
						}
					}, 7000);
				});

			};
			var first = null;
			mui.back = function() {
				//首次按键，提示‘再按一次退出应用’
				if(!first) {
					first = new Date().getTime();
					plus.nativeUI.toast("再按一次退出程序");
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if(new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}
			};
		</script>
	</body>

</html>